<template>
  <div v-show="items.length >= 2 && items.length <= 5">
    <div class="footer" :style="{ background: background }">
      <div class="footer-flex" :style="formTheoutside(items.length)">
        <div v-for="(item, index) of items" @click="click_to_jump(item, index)" :key="index">
          <div class="item-all" :style="{ width: number(items.length) + 'px' }">
            <div class="img-position">
              <img class="img-image" :src="index == digital_army ? item.iconSelect : item.icon" />
              <div v-if="item.dot" class="item-info"></div>
              <div v-if="item.dang > 0" class="item-text">{{ item.dang }}</div>
            </div>
            <div :style="{ color: digital_army == index ? logicalColor : color }" class="info">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dangObject: {
      type: Array,
      default: () => {
        return [
          {
            index: '1',
            num: 20,
          },
          {
            index: '0',
            num: 20,
          },
        ];
      },
    },
    dotObject: {
      type: Array,
      default: () => {
        return [0];
      },
    },
    logicalColor: {
      type: String,
      default: () => {
        return '#2093f7';
      },
    },
    color: {
      type: String,
      default: () => {
        return '#fff';
      },
    },
    background: {
      type: String,
      default: () => {
        return '#1989fa';
      },
    },
    num: {
      type: Number,
      default: () => {
        return 0;
      },
    },
  },
  watch: {
    dotObject: {
      handler() {
        if (this.dotObject.length > 0) {
          this.dotObject.map((res) => {
            this.queryMessage(res, 'dot');
          });
        }
      },
      immediate: true,
    },
    dangObject: {
      handler() {
        if (this.dangObject.length > 0) {
          this.dangObject.map((res) => {
            this.queryMessage(res.index, 'dang', res.num);
          });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      digital_army: this.num,
      items: [
        {
          name: '首页',
          push: '/',
          icon: 'https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg',
          iconSelect: 'https://tse1-mm.cn.bing.net/th/id/R-C.65398d6ad86129f9628c0ad80da4040c?rik=C3qNS9mZOQk%2b5A&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10420.jpg&ehk=QBNuJIbVP1qo%2bwUD3YzXcvL4H5iHivOHXUnzzRw%2bWfU%3d&risl=&pid=ImgRaw&r=0',
        },
        {
          name: '分类',
          push: '/classification',
          icon: 'https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg',
          iconSelect: 'https://tse1-mm.cn.bing.net/th/id/R-C.65398d6ad86129f9628c0ad80da4040c?rik=C3qNS9mZOQk%2b5A&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10420.jpg&ehk=QBNuJIbVP1qo%2bwUD3YzXcvL4H5iHivOHXUnzzRw%2bWfU%3d&risl=&pid=ImgRaw&r=0',
        },
        {
          cls: 'classification',
          name: '表单',
          push: '/form',
          icon: 'https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg',
          iconSelect: 'https://tse1-mm.cn.bing.net/th/id/R-C.65398d6ad86129f9628c0ad80da4040c?rik=C3qNS9mZOQk%2b5A&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10420.jpg&ehk=QBNuJIbVP1qo%2bwUD3YzXcvL4H5iHivOHXUnzzRw%2bWfU%3d&risl=&pid=ImgRaw&r=0',
        },
        {
          cls: 'personalCenter',
          name: '我的',
          push: '/personalCenter',
          icon: 'https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg',
          iconSelect: 'https://tse1-mm.cn.bing.net/th/id/R-C.65398d6ad86129f9628c0ad80da4040c?rik=C3qNS9mZOQk%2b5A&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10420.jpg&ehk=QBNuJIbVP1qo%2bwUD3YzXcvL4H5iHivOHXUnzzRw%2bWfU%3d&risl=&pid=ImgRaw&r=0',
        },
      ],
    };
  },
  methods: {
    // 显示提示和消息条数
    queryMessage(value, text, num) {
      for (let index = 0; index < this.items.length; ++index) {
        if (value == index || this.items[index].id) {
          this.$set(this.items[index], text, text == 'dot' ? true : num);
        }
      }
    },
    // 动态计算外边距
    formTheoutside(value) {
      let tabObject = {
        2: 'margin: 0 50px;',
        3: 'margin: 0 20px;',
        4: 'margin: 0 20px;',
        5: 'margin: 0 10px;',
      };
      return tabObject[value];
    },
    // 根据传递的tabbar个数不同来给到不同的宽度样式
    number(value) {
      if (Object.prototype.toString.call(value) === '[object Number]') {
        let array = [1, 100, 100, 100, 80, 60];
        return array[value];
      } else {
        throw new Error('请传递数字类型的参数');
      }
    },
    // 点击跳转
    click_to_jump(d, index) {
      if (this.$route.path != d.push) {
        this.$router.push(d.push);
        this.$emit('digital_click', {
          name: d,
          index: index,
        });
      }
    },
  },
};
</script>
<style scoped>
.item-text {
  border-color: transparent !important;
  margin-top: 8px;
  position: absolute;
  right: 0;
  top: 0;
  color: rgb(232, 230, 227);
  background-color: rgb(190, 8, 29);
  box-shadow: border-box;
  min-width: 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
  line-height: 1.2;
  text-align: center;
  border-radius: 16px;
  border: 1px solid #fff;
  transform: translate(50%, -50%);
  transform-origin: 100%;
}
.item-all {
  cursor: pointer;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.img-image {
  position: relative;
}
.img-position {
  display: inline-block;
  position: relative;
}
.img-position div {
  position: absolute;
  right: 0;
  top: 0;
}
.footer {
  width: 100%;
  text-align: center;
  position: fixed;
  height: 50px;
  border-top: 1px solid #e7e3e2;
}
.footer-flex {
  display: flex;
  justify-content: space-between;
}

.info {
  text-align: center;
  font-size: 12px;
  line-height: 1;
}
.footer img {
  margin-bottom: 4px;
  width: 20px;
  height: 20px;
  margin-top: 7px;
}
.item-info {
  margin-top: 8px;
  box-shadow: border-box;
  line-height: 1.2;
  min-width: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: red;
  transform: translate(50%, -50%);
  transform-origin: 100%;
}
</style>
